<template>
	<view class="wrap u-flex-col">
		<u-navbar
			title-color="#fff"
			back-icon-color="#fff"
			z-index="9999"
			:is-fixed="isFixed"
			:is-back="isBack"
			:background="background"
			:back-text-style="{ color: '#fff' }"
			:title="title"
			:custom-back="pageBack"
			:back-icon-name="backIconName"
		>
			<view class="navbar-right u-flex" slot="right">
				<view class="message-box right-item" @click.stop="openPage('/pages/workbench/fireproof/add')">
					<u-icon name="plus" size="38" color="#fff" style="margin-right:30rpx;"></u-icon>
				</view>
				<view class="message-box right-item" @click="showSearch = true"><u-icon name="search" size="38" color="#fff" style="margin-right:30rpx;"></u-icon></view>
			</view>
		</u-navbar>
		<view class="list">
			<view class="u-flex item" @click.stop="openPage('/pages/workbench/fireproof/add')">
				<view class="pic">
					<image src="@/static/images/car1.jpeg" mode="widthFix"></image>
				</view>
				<view class="info u-flex-1">
					<view class="name u-font-lg">隐患登记</view>
					<view class="carClass u-font-20 u-color-999">登记人：张师傅</view>
					<view class="carClass u-font-20 u-color-999">登记说明：登记了什么</view>
					<view class="carClass u-font-20 u-color-999">登记事件：2021-08-15</view>
					<view class="carClass u-font-20 u-color-999">
						状态：
						<text class="u-type-primary">审核中</text>
					</view>
					<view class="u-text-right u-m-t-20">
						<u-button type="warning" size='mini'>审核</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showSearch" mode="right" width="80%">
			<view class="myform">
				<view class="formItem">
					<view class="label">登记类型</view>
					<u-input
						:border="border"
						type="select"
						:select-open="actionCarTypeShow"
						v-model="model.carType"
						placeholder="请选择登记类型"
						@click="actionCarTypeShow = true"
					></u-input>
				</view>
				<view class="formItem">
					<view class="label">登记状态</view>
					<u-input
						:border="border"
						type="select"
						:select-open="actionCarTypeShow"
						v-model="model.carType"
						placeholder="请选择登记状态"
						@click="actionCarTypeShow = true"
					></u-input>
				</view>
				<view class="formItem">
					<view class="label">登记时间</view>
					<u-input :border="border" type="picker" v-model="model.buyTime" placeholder="请选择登记时间" @click="buyTimeShow = true"></u-input>
				</view>
				
				<view class="u-m-t-40"><u-button type="primary" @click="showSearch = false">搜索</u-button></view>
			</view>
		</u-popup>
		<u-action-sheet :list="carTypeList" v-model="actionCarTypeShow" @click="carTypeChoose"></u-action-sheet>
		<u-picker mode="time" v-model="buyTimeShow" :params="params" @confirm="buyTimerConfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			border: true,
			swiperCurrent:0,
			current:0,
			list: [
				{
					name: '全部'
				},
				{
					name: '待维护'
				},
				{
					name: '已完成'
				}
			],
			model: {
				carType: '',
				carName: '',
				buyTime: '',
				carAge: ''
			},
			actionCarTypeShow: false,
			carTypeList: [{text:'隐患登记'},{text:'轻微火灾登记'}],
			buyTimeShow: false,
			title: '防消联勤',
			background: { backgroundColor: '#0251b6' },
			backIconName: 'nav-back',
			right: false,
			isBack: true,
			isFixed: true,
			name: '',
			myDate: '',
			params: {
				year: true,
				month: true,
				day: true
			},
			showSearch: false
		};
	},
	methods: {
		//页面跳转
		openPage(url) {
			this.$u.route({
				url: url
			});
		},
		pageBack() {
			uni.navigateBack({
				delta: 1
			});
			// javascript:history.back();
		},
		carTypeChoose() {},
		buyTimerConfirm() {},
		timerConfirm() {},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
			// this.getOrderList(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	background-color: rgb(240, 242, 244);
	.swiper-box {
		.title {
			padding: 20rpx 0;
		}
		.swiper-item {
			// padding: 0 20rpx;
		}
	}
}
.myform {
	padding: 20rpx;
	.formItem {
		margin-bottom: 20rpx;
		.label {
			margin-bottom: 10rpx;
		}
	}
}
.list {
	.item {
		background: #fff;
		border-radius: 0.3em;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		padding: 20rpx;
		margin: 20rpx;
			align-items: flex-start !important;
		.pic {
			width: 100rpx;
			height: 100rpx;
			padding-top:10rpx;
			image {
				width: 100%;
			}
		}
		.info {
			margin-left: 20rpx;
			line-height: 1.5;
		}
		.operBtn {
			padding: 0 20rpx 0 0;
			text-align: right;
		}
	}
}
</style>
